@CHARSET "UTF-8";

/*!
 * =================================
 * appoint-course style
 * @author: mylan93@163.com
 * =================================
 */

/* ! Style Check List
 * =================================
 *  appoint course list
 * ==============================
 *  appoint course view
 * ==============================
 *  appoint order course list
 * ==============================
 *  appoint order course view
 * ==============================
 *  appoint order create
 * =================================
 */

body {
  font-family: "微软雅黑", Arial;
}

.color-red {
  color: #f00;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1
}
/**
 * ============================
 *  appoint course list 
 * ============================
 **/
.course-title {
  margin: 0;
  padding: .5rem .75rem;
  font-size: .8rem;
  background: #fff;
}

.course-title .fa {
  font-size: 1rem;
  margin-right: .5rem;
  color: #fd0404;
  vertical-align: middle;
}

.course-list-wrap {
  position: relative;
  background: #fff;
}

.course-list-wrap:after,
.course-list-wrap:before,
.course-list-wrap .item:before,
.course-list-wrap .item:after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  background: #e7e7e7;
  z-index: 11;
}

.course-list-wrap:after {
  bottom: 0;
  height: 1px;
}

.course-list-wrap:before {
  top: 0;
  height: 1px;
}

.course-list-wrap .item {
  position: relative;
  display: block;
  padding: .5rem .25rem .25rem;
  height: 9.6rem;
}

.course-list-wrap .item:before {
  right: 0;
  left: 0;
  bottom: 0;
  height: 1px;
}

.course-list-wrap .item:after {
  right: 0;
  left: inherit;
  top: .5rem;
  bottom: 0;
  width: 1px;
}
 
.course-list-wrap .item .cover-title {
  padding-top: .25rem;
  height: 3.5rem;
  font-size: .6rem;
  color: #666;
  overflow: hidden;
}

.course-list-wrap .item img {
  display: block;
  height: 4rem;
  max-width: 100%;
  min-width: 100%;
}

.course-list-wrap .item h5 {
  margin-bottom: .25rem;
  font-size: .7rem;
  color: #333;
}

.course-list-wrap .description {
  margin: 0;
  height: 1.6rem;
  line-height: .8rem;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-list-wrap .item .price {
  margin: 0;
  color: #fd0404;
  font-size: .65rem;
}

/**
 * ===========================
 *  appoint course view 
 * ===========================
 **/
.banner img {
  display: block;
  height: 10rem;
  max-width: 100%;
  min-width: 100%;
}

.bar-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
}

.group-btn {
  height: 2.2rem;
  line-height: 2.2rem;
  font-size: .75rem;
  color: #fff;
  border-radius: 0;
  border: 1px solid transparent;
}

.group-btn.active,
.group-btn:active {
  border: 1px solid transparent;
  color: #fff;
}

.other-group {
  background: #f7735e;
}

.open-group, 
.join-group {
  background: #fe0000;
}

/**
 * ============================
 *  appoint order course list
 * ============================
 **/
.order-course-list .item-media img {
  width: 4rem;
}

.order-course-list .item-subtitle p {
  margin: .25rem 0;
}

.order-course-list .item-title {
  color: #333;
  font-size: .75rem;
}

.order-course-list .tips {
  display: inline-block;
  padding: 1px .25rem; 
  color: #fff;
  font-size: .6rem;
  letter-spacing: 2px;
  background: #fda706;
  margin-right: .25rem;
}

.order-course-list .member-list {
  padding: 0;
}

.order-course-list .member-list img {
  width: 1rem;
  height: 1rem;
}

.order-course-list .item-subtitle span {
  color: #fff;
}

.order-course-list .description {
  display: -webkit-box;
  max-height: 2rem;
  font-size: .6rem;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.order-course-list p span {
  font-size: .6rem;
  color: #2e9cfd;
} 

.order-course-list .price {
  font-size: .75rem;
  color: #f00 !important;
}

.order-course-list .price-time,
.order-course-list .price-time .countdown {
  height: 1.2rem;
  line-height: 1.2rem;
  padding-right: 0;
}

.order-course-list .price-time .countdown {
  padding: 0 .25rem;
  color: #f1dc6f;
  border-radius: .25rem;
  background: #f00;
}

.appoint-order .open-group {
  position: fixed;
  right: .25rem;
  bottom: 3rem;
  display: inline-block;
  padding: .25rem .5rem;
  color: #fff;
  font-size: .65rem;
  border-radius: .25rem;
}

/**
 * ===========================
 *  appoint order course view
 * ===========================
 **/
.member {
  margin-bottom: .75rem;
  background: #9c8f7e;
  height: 2.2rem;
  color: #fff;
}

.member > span {
  display:inline-block;
  padding: 0 .5rem;
  height: 2.1rem;
  line-height: 2.1rem;
  font-size: .65rem;
  vertical-align: top;
}

.member-list {
  display: inline-block;
  padding: .25rem 0;
}

.member-list img {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
}

.countdown {
  padding-right: .5rem;
  display: inline-block;
  font-size: .6rem;
  height: 2.1rem;
  line-height: 2.1rem;
  color: #f00;
  float: right;
}

.appoint-order-view {
  padding: .25rem 0 .5rem;
}

.appoint-order-view .description {
  padding: .5rem;
}

.order-create .details h5,
.appoint-order-view h5 {
  display: -webkit-box;
  padding: 0 .5rem;
  margin-bottom: .5rem;
  max-height: 1.8rem;
  line-height: .9rem;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.appoint-order-view p {
  margin: 0;
  font-size: .6rem;
}

.appoint-order-view .course-description-title {
  
  height: 1.5rem;
  line-height: 1.5rem;
  font-size:.6rem;
  color: #999;
  text-align: center;
  background: #e8e8e8;
 
}
/**
 * ===========================
 *  appoint order create
 * ===========================
 **/
 
.order-create .details {
  padding: .5rem .75rem .25rem;
  width: 100%;
  background: #fff;
}

.order-create .details h5 {
  padding: 0;
  margin-bottom: .25rem;
}

.order-create .details .name {
  font-size: .7rem;
  color: #333;
}

.order-create .details .price {
  color: #f00;
}

.order-create .list-block {
  margin-top: 0;
}

/* .order-create .list-block li {
  background: #f7f7f7;
} */

.order-join .item-input,
.order-create .item-input input, 
.order-create .item-input select, 
.order-create .item-input textarea {
  text-align: right;
  font-size: .7rem;
}

.order-create .fa
.order-join .fa {
  font-size: 1rem;
}

.button-fill.save-submit,
.button.save-submit.active,
.button.save-submit:active,
.button-fill.join-submit,
.button.join-submit.active,
.button.join-submit:active {
  background: #f7735e;
}

.create-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background: #f7f7f7;
  border-top: 1px solid #e6e6e6;
}

.create-group .price {
  flex: 1;
  margin: 0;
  height: 2.4rem;
  line-height: 2.4rem;
  font-size: .6rem;
  text-align: right;
  padding-right: .75rem;
}

.create-group .button-fill.save-submit ,
.order-join .button-fill.join-submit {
  flex-shrink: 0;
  border-radius: 0;
  padding: 0 1.5rem;
  font-size: .75rem;
}

.order-join .course-title {
  margin: 0;
  font-size: .7rem;
  color: #000;
}

.order-join .order-intro {
  background: #FAFAFA;
}

.order-join .item-title-row {
  margin-bottom: .25rem;
}


.order-join .item-title-row .item-title {
  display: -webkit-box;
  height: 1.8rem;
  line-height: .9rem;
  font-size: .65rem;
  color: #333;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.order-join .item-subtitle {
  white-space: normal;
}

.order-join .item-subtitle span {
  font-size: .6rem;
  color: #999;
  margin: 0 .25rem 0 0;
}

.order-join .item-subtitle .expiry-date,
.order-create .expiry-date {
  padding: 0 .3rem;
  border-radius: 2px;
  border: 1px solid #de0404;
  color: #de0404;
}

.order-create .expiry-date {
  float: right;
  font-size: .6rem;
}

.order-join .item-subtitle .price {
  color: #F0530C;
}

.order-price-time {
  position: relative;
  padding: 0 .75rem;
  height: 2rem;
  line-height: 2rem;
  background: #f00;
 
}

.order-price-time .price {
  color: #fff;
}

.order-price-time .countdown {
  position: absolute;
  right: .75rem;
  top: 0;
  color: #fcff4b;
  font-size: .9rem;
  /* color: #fff; */
}

.coupon-radio {
  margin: 0px;
}


.coupon-radio {
  position: relative;
  margin: .4rem;
  border: 1px solid #FFE000;
}

.coupon-radio.coupon-disable {
  border: 1px solid #F3F3F3;
}

.coupon-radio,
.coupon-radio ul {
  border-radius: .3rem;
}

.coupon-radio:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0px;
  width: 100%;
  height: .3rem;
  background-color: #FFE000;
  z-index: 99;
}

.coupon-radio.coupon-disable:before {
  background-color: #999;
}

.coupon-radio .item-media {
  padding-right: .4rem;
}

.coupon-radio .item-inner {
  padding-right: 0px;
}

.coupon-radio .item-text {
  height: 4rem;
}

.coupon-radio .coupon-info {
  width: 100%;
  padding-left: 5rem;
  padding-top: .6rem;
}

.coupon-radio .coupon-amount {
  position: absolute;
  width: 5rem;
  line-height: 4rem;
  font-size: 1.8rem;
  margin: 0px;
  color: #FFE200;
}

.coupon-radio.coupon-disable .coupon-amount {
  color: #999;
}

.coupon-radio .coupon-amount span {
  font-size: .9rem;
}

.coupon-radio .coupon-info p {
  margin: 0px;
}

.coupon-radio .coupon-info p.coupon-title {
  font-size: .7rem;
  color: #3d4145;
  line-height: 1.8rem;
}

.coupon-radio .coupon-info p.coupon-date {
  font-size: .6rem;
  line-height: 1.2rem;
}

.styled{
  display: inline-block;
  height: 2rem;
  padding-top: .2rem;
}

.styled div {
  display: inline-block;
  margin-left: 10px;
  font-size: .9rem;
  font-weight: 100;
  line-height: 1;
  text-align: right;
  color: #fff;
}
/* IE7 inline-block hack */
*+html .styled div{
  display: inline;
  zoom: 1;
}
.styled div:first-child {
  margin-left: 0;
}
.styled div span {
  display: block;
  border-top: 1px solid #fff;
  padding-top: .1rem;
  font-size: .6rem;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;

}